<template>
  <el-row class="row">
    <menu-create-modal ref="menuCreateModal" :menuData="menuData" :projectType="projectType" :pid="pid"
                       @refresh="setRefresh"></menu-create-modal>
    <el-col :span="24">
      <el-form class="el-form-col" ref="elForm">
        <Portlet>
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="" prop="cargoOwner">
                <el-input v-model="search.name" placeholder="菜单名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button type="primary" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
            </el-col>
          </el-row>
        </Portlet>

        <Portlet title="菜单树">
          <div slot="tools">
            <el-button type="primary" @click.prevent="createRoot">添加根菜单</el-button>
          </div>
          <el-tree
            :data="menuData"
            :expand-on-click-node="false"
            :filter-node-method="filterNodeMethod"
            :props="{
              label: 'name'
            }"
            draggable
            ref="elTree"
            @node-drop="nodeDrop"
            :allow-drop="allowDrop"
            node-key="id"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span>
                <el-button
                  type="text"
                  size="mini"
                  @click.prevent="setEdit(data)"
                 >
                  编辑
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click.prevent="setDel(data)"
                 >
                  删除
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click.prevent="setCreate(data)"
                >
                  添加
                </el-button>
              </span>
            </span>
          </el-tree>
        </Portlet>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
import menuCreateModal from '@/views/oms/information/MenuCreateModal'
import {dotData, alert, confirm, arrayToTree} from '@/utils'
export default {
  name: 'informationMenu',
  components: {
    menuCreateModal
  },
  data() {
    return {
      menuData: [],
      data: [],
      pid: '',
      search: {
        name: ''
      },
      projectType: 'storeWeb'
    }
  },
  created() {
    // 获取菜单数据
    this.httpGetMenuData()
  },
  methods: {
    httpGetMenuData() {
      this.$ajax.get('/ms-common-user/menu/menu-list', {projectType: this.projectType}).then(response => {
        const success = dotData(response, 'success')
        if (success) {
          const data = dotData(response, 'data')
          if (Array.isArray(data)) {
            this.menuData = arrayToTree(data.map(v => {
              v.text = v.name
              v.value = v.id
              return v
            }), 'id', 'parentId', 'children', 0, true)
          }
        }
      })
    },
    // 编辑
    setEdit(row) {
      const id = row.id
      this.pid = ''
      this.$refs.menuCreateModal.show(id)
    },
    // 刷新数据
    setRefresh() {
      this.httpGetMenuData()
    },
    // 创建菜单
    setCreate(data) {
      this.pid = data.id || 0
      this.$refs.menuCreateModal.show()
    },
    // 创建根菜单
    createRoot() {
      this.setCreate({id: '0'})
    },
    setMenuData(arr) {
      this.menuData = arr
    },
    // 删除
    setDel(data) {
      const children = dotData(data, 'children')
      if (children && children.length > 0) {
        alert('此菜单还有下级菜单，请先删除下级菜单后才能删除')
        return
      }
      const id = dotData(data, 'id')
      confirm('<p>是否确认删除？</p>', '删除菜单', {
        confirmButtonLoading: true,
        type: 'success',
        dangerouslyUseHTMLString: true,
        confirmCallBack: ({confirmButtonLoadingClose, close}) => {
          return this.$ajax.post('/ms-common-user/menu/saveUpdateMenu', {id, operate: 'delete'}).then(response => {
            if (response.success) {
              close().then(_ => {
                this.setRefresh()
                confirm('删除成功')
              })
            }
          }).finally(_ => {
            confirmButtonLoadingClose()
          })
        }
      })
    },
    // 跳转到图片库
    toIcon() {
      this.setRefreshRoute({path: '/icon'})
    },
    // element 拖动
    nodeDrop(dragging, dropNode) {
      const treeNode = this.$refs.elTree
      if (treeNode) {
        this.$nextTick(_ => {
          const draggingNode = treeNode.getNode(dragging.data)
          const preNode = draggingNode.previousSibling
          const nextNode = draggingNode.nextSibling
          const parentNode = draggingNode.parent
          const id = dotData(draggingNode, 'data.id')
          const beforeId = dotData(preNode, 'data.id')
          const afterId = dotData(nextNode, 'data.id')
          const parentId = dotData(parentNode, 'data.id') || 0
          this.$ajax.get('/ms-common-user/menu/sort-menu', {id, beforeId, afterId, parentId}).then(response => {
            const success = dotData(response, 'success')
            if (success) {
              alert('排序成功', '提示', 'success')
            }
          })
        })
      }
    },
    allowDrop(draggingNode, dropNode, type) {
      return true
    },
    // 搜索
    searchFunc(search) {
      const treeNode = this.$refs.elTree
      if (treeNode) {
        treeNode.filter(search.name)
      }
    },
    filterNodeMethod(value, data, node) {
      if (data.text) {
        return data.text.indexOf(value) >= 0
      }
      return false
    }
  }
}
</script>
